<script setup>
  import { computed, getCurrentInstance, nextTick, onMounted, reactive, watch } from 'vue';
  import sheep from '@/sheep';

  const { proxy } = getCurrentInstance();

  const state = reactive({
    list_one: [],
    list_two: [],
    list_three: [],
    animationData_one: {},
    animationData_two: {},
    animationData_three: {},
    // 暂存区
    workingArea: [],
  });

  const props = defineProps({
    list: {
      type: Array,
      default: [],
    },
  });

  uni.$on('setWorkingArea', (data) => {
    setWorkingArea(data);
  });

  uni.$on('setAllNone',()=>{
    setAllNone()
  })

  watch(() => props.list, (newVal) => {
    console.log(newVal);
    state.list_one = []
    state.list_two = []
    state.list_three = []
    props.list.forEach((item, index) => {
      if (index % 3 === 0) {
        state.list_one.push(item);
      } else if (index % 3 === 1) {
        state.list_two.push(item);
      } else {
        state.list_three.push(item);
      }
    });
    setAnimation();
    setAnimation_two();
    setAnimation_three();
  }, { deep: true });

  function setAnimation(id, animation) {
    if (state.workingArea.length > 0) {
      state.list_one.push(state.workingArea[0]);
      state.workingArea.pop(0);
    }
    nextTick(() => {
      const query = uni.createSelectorQuery().in(proxy);
      query.select('#animationData_one').boundingClientRect((rect) => {
        let animation = uni.createAnimation({
          duration: state.list_one.length * 5000 + (Math.floor(Math.random() * 100)),
          timingFunction: 'linear',
        });
        animation.translateX(-rect.width).step();
        animation.translateX(rect.width).step({
          duration: 100,
          timingFunction: 'step-start',
        });
        state.animationData_one = animation.export();
      }).exec();
      setTimeout(() => {
        setAnimation();
      }, state.list_one.length * 5000 + 1000);
    });
  }

  function setAnimation_two(id, animation) {
    if (state.workingArea.length > 0) {
      state.list_two.push(state.workingArea[0]);
      state.workingArea.pop(0);
    }
    nextTick(() => {
      const query = uni.createSelectorQuery().in(proxy);
      query.select('#animationData_two').boundingClientRect((rect) => {
        let animation = uni.createAnimation({
          duration: state.list_two.length * 6000 + (Math.floor(Math.random() * 100)),
          timingFunction: 'linear',
        });
        animation.translateX(-rect.width).step();
        animation.translateX(rect.width).step({
          duration: 100,
          timingFunction: 'step-start',
        });
        state.animationData_two = animation.export();
      }).exec();
      setTimeout(() => {
        setAnimation_two();
      }, state.list_two.length * 6000 + 1000);
    });
  }

  function setAnimation_three(id, animation) {
    if (state.workingArea.length > 0) {
      state.list_three.push(state.workingArea[0]);
      state.workingArea.pop(0);
    }
    nextTick(() => {
      const query = uni.createSelectorQuery().in(proxy);
      query.select('#animationData_three').boundingClientRect((rect) => {
        let animation = uni.createAnimation({
          duration: state.list_three.length * 7000 + (Math.floor(Math.random() * 100)),
          timingFunction: 'linear',
        });
        animation.translateX(-rect.width).step();
        animation.translateX(rect.width).step({
          duration: 100,
          timingFunction: 'step-start',
        });
        state.animationData_three = animation.export();
      }).exec();
      setTimeout(() => {
        setAnimation_three();
      }, state.list_three.length * 7000 + 1000);
    });
  }

  function setWorkingArea(text = '') {
    state.workingArea.push(text);
  }

  function setAllNone(){
    state.list_one = [];
    state.list_two = [];
    state.list_three = [];
  }

</script>

<template>
  <view class="flex-sub flex flex-column">
    <view class="flex-sub w-100 flex align-center" style="overflow: hidden">
      <view id="animationData_one" class="danmu flex-sub flex align-center" style="position: relative;"
            :animation="state.animationData_one"
      >
        <view :id="`list_${index}`" class="fs_26 fw_500 ml_20"
              v-for="(item,index) in state.list_one"
              :key="index"
              style="white-space: pre;color: #A7752A;"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <view class="flex-sub w-100 flex align-center" style="overflow: hidden">
      <view id="animationData_two" class="danmu2 flex-sub flex align-center" style="position: relative;"
            :animation="state.animationData_two"
      >
        <view :id="`list_${index}`" class="fs_26 fw_500 ml_20"
              v-for="(item,index) in state.list_two"
              :key="index"
              style="white-space: pre;color: #A7752A;"
        >
          {{ item }}
        </view>
      </view>
    </view>
    <view class="flex-sub w-100 flex align-center" style="overflow: hidden">
      <view id="animationData_three" class="danmu3 flex-sub flex align-center" style="position: relative;"
            :animation="state.animationData_three"
      >
        <view :id="`list_${index}`" class="fs_26 fw_500 ml_20"
              v-for="(item,index) in state.list_three"
              :key="index"
              style="white-space: pre;color: #A7752A;"
        >
          {{ item }}
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
  .danmu {
    position: absolute; /* 定位弹幕 */
    white-space: normal; /* 防止换行 */

  }

  .danmu2 {
    position: absolute; /* 定位弹幕 */
    white-space: normal; /* 防止换行 */
  }

  .danmu3 {
    position: absolute; /* 定位弹幕 */
    white-space: normal; /* 防止换行 */
  }
</style>